import React, {Component, PropTypes} from 'react';

import { Table  } from 'antd';

export default class Question extends Component {

  questions = []
  exam_question_path = 'dba/questions/question_'+this.props.$loki+'.json'

  constructor (props) {
    super(props);

    /**
     * table头部
     * @type {*[]}
     */
    this.columns = [{
      title: '试题id',
      width: 40,
      dataIndex: '$loki'
    },{
      title: '试题标题',
      width: 150,
      dataIndex: 'eq_title'
    },{
      title: '试题类型',
      width: 80,
      dataIndex: 'eq_type',
      filters: [
        { text: '判断题', value: 'tfng' },
        { text: '单选题', value: 'single' },
        { text: '多选题', value: 'multiple' }
      ],
      render:function (text) {
        const textObj = {
          tfng : '判断题',
          single : '单选题',
          multiple : '多选题'
        };
        return textObj[text]
      }
    }, {
      title: '试题选项',
      width: 150,
      dataIndex: 'A',
      render : function (text,value) {
        let ret = [];
        ret.push(value.A);
        ret.push(value.B);
        value.C && ret.push(value.C);
        value.D && ret.push(value.D);

        let html = ret.join('<br/>');
        return (
          <div dangerouslySetInnerHTML={{__html: html}}>
          </div>
        );
      }
    },{
      title: '试题答案',
      width: 70,
      dataIndex: 'eq_answer'
    }];
  }

  componentDidMount () {
    const {examActions, exam} = this.props;
    const examdetail = exam && exam.get('examdetail').toJS();
    this.questions = examdetail.exam_tfng_array.concat(examdetail.exam_single_array).concat(examdetail.exam_multiple_array);
    examActions.getQuestionList({
      questions : this.questions,
      path : this.exam_question_path
    });

  }

  handleTableChange = (pagination, filters, sorter) => {
    const {examActions} = this.props;
    examActions.getQuestionList({
      questions : this.questions,
      path : this.exam_question_path,
      eq_type : filters.eq_type
    });
  }

  render() {

    const {exam} = this.props;
    const list = exam.get('questionList') && exam.get('questionList').toArray();
    const pagination = {
      total : list ? list.length : 0,
      pageSize : 20
    }

    return (
      <div className="ant-table-wraper">
        <Table
          bordered
          columns={this.columns}
          dataSource={list}
          pagination={pagination}
          onChange={this.handleTableChange}
        />

        {
          pagination.total > 0 && <div className="ant-table-extend">共有试题<b>{pagination.total}</b>道</div>
        }
      </div>
    )
  }

}
